<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="leftMenu" class="col-md-3">
    <div class="panel-group table-responsive" role="tablist">
        <div class="panel panel-primary leftMenu" style="border-top-left-radius: 0px;border-top-right-radius: 0px;">
            <!-- 利用data-target指定要折叠的分组列表 -->
            <div class="panel-heading" id="collapseListGroupHeading1" style="border-radius: 0px;">
                <!--data-toggle="collapse"  data-target="#collapseListGroup1" role="tab"-->

                <h4 class="panel-title">
                    主菜单
                    <span class="glyphicon glyphicon-chevron-down right"></span>
                </h4>
            </div>
            <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
            <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel"
                 aria-labelledby="collapseListGroupHeading1">
                <ul class="list-group">
                    <li class="list-group-item ">
                        <!-- 利用data-target指定URL -->
                        <button class="menu-item-left" th:href="@{/main}">
                            <span class="glyphicon glyphicon-star-empty"></span>&nbsp;我的收藏
                        </button>
                    </li>
                    <li class="list-group-item">
                        <button class="menu-item-left" th:href="@{/discovery}">
                            <span class="glyphicon glyphicon-cloud"></span>&nbsp;发现
                        </button>
                    </li>
                    <li class="list-group-item">
                        <button class="menu-item-left" th:href="@{/categoryCover/view}">
                            <span class="glyphicon glyphicon-folder-open"></span>&nbsp;收藏分类
                        </button>
                    </li>
                    <li class="list-group-item">
                        <button class="menu-item-left"  th:href="@{/import/view}">
                            <span class="glyphicon glyphicon-import"></span>&nbsp;导入收藏夹
                        </button>
                    </li>
                    <li class="list-group-item">
                        <button class="menu-item-left" th:href="@{/export/view}">
                            <span class="glyphicon glyphicon-export"></span>&nbsp;导出收藏夹
                        </button>
                    </li>
                    <li class="list-group-item">
                        <button class="menu-item-left " th:href="@{/plugin}">
                            <span class="glyphicon glyphicon-triangle-right"></span>&nbsp;网页收藏工具
                        </button>
                    </li>
                </ul>
            </div>
        </div><!--panel end-->
    </div>
    <style type="text/css">
        .panel-group {
            max-height: 700px;
            overflow: auto;
        }

        .leftMenu {
            border-radius: 0px;
            margin-top: 0px;
            z-index: 10;
        }

        .leftMenu .panel-heading {
            font-size: 14px;
            padding-left: 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            position: relative;
            cursor: pointer;
        }

        /*转成手形图标*/
        .leftMenu .panel-heading span {
            position: absolute;
            right: 10px;
            top: 12px;
        }

        .leftMenu .menu-item-left {
            padding: 2px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 6px;
            width: 100%;
            text-align: left;
            height: 40px;
        }
        .leftMenu .list-group-item {
            padding: 5px 15px;
        }

        .leftMenu .list-group-item:hover{
            background-color: #0f7864;
            border: 1px solid transparent;
            color: white;
        }

        .leftMenu .list-group-item.active {
            background-color: #18bc9c;
            border: 1px solid transparent;
            color: white;
        }

        #collapseListGroup1{
            height: 500px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#collapseListGroup1 .menu-item-left").each(function (i) {
                var hr = $(this).attr("href");
                if (hr == location.pathname){
                    $(this).parent(".list-group-item").addClass("active");
                }
            });
            $('#collapseListGroup1 .menu-item-left').click(function (e) {
                location.href = $(this).attr("href");
            });
            $(".panel-heading").click(function (e) {
                // /*切换折叠指示图标*/
                // $(this).find("span").toggleClass("glyphicon-chevron-down");
                // $(this).find("span").toggleClass("glyphicon-chevron-up");
            });
        });
    </script>
</div>
</body>
</html>